<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-select v-model="search_area_code" filterable clearable placeholder="请选择城市">
                <el-option v-for="(item, k) in area_code_dic" :key="k" :label="item.area_name" :value="item.area_code" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="search.county_code" filterable clearable placeholder="请选择地区">
                <el-option v-for="(item, k) in county_code_dic" :key="k" :label="item.area_name" :value="item.area_code" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.keyword" placeholder="请输入学校编号/学校名称" />
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getSchoolPaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <!-- 操作按鈕 -->
      <div class="main-header">
        <el-row :gutter="20">
          <el-col :span="4" class="left">学校列表</el-col>
          <el-col :span="20" class="right">
            <span v-if="auth.sync != -1" class="spp-btn spp-btn-primary" @click="schoolSync()">同步学校信息</span>
          </el-col>
        </el-row>
      </div>
      <el-table ref="table" :data="school_paginate_data" :height="height-130" size="mini" stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="城市" prop="city_name" min-width="100" align="left" />
        <el-table-column label="地区" prop="county_name" min-width="100" align="left" />
        <el-table-column label="学校标识" prop="hxy_scl_id" min-width="100" align="left" />
        <el-table-column label="学校编号" prop="scl_no" min-width="100" align="left" />
        <el-table-column label="学校名称" prop="scl_name" min-width="150" align="left" />
        <el-table-column label="名称简拼" prop="scl_spell" min-width="150" align="left" />
        <el-table-column label="学校类别" prop="category_name" min-width="150" align="left" />
        <el-table-column label="学校类型" prop="scl_type_name" min-width="150" align="left" />
        <el-table-column label="操作" min-width="150" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button v-if="auth.update != -1" type="text" @click="schoolDetail(scope.row.scl_id)">修改</el-button>
            <el-button v-if="auth.cmcc_divide != -1" type="text" @click="setSchoolCmccVisible(scope.row.scl_id)">客户经理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getSchoolPaginateData" />
    </div>
    <!-- 编辑学校 -->
    <el-dialog title="编辑学校" :visible.sync="schoolEditVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-form ref="school_edit_form" label-width="20px" :model="school_edit_form">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="scl_name">
                <div class="form_lable">学校名称</div>
                <el-input v-model="school_edit_form.scl_name" placeholder="请输入学校名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="category">
                <div class="form_lable">学校类别</div>
                <el-select v-model="school_edit_form.category" placeholder="请选择学校类别">
                  <el-option v-for="(value, key, index) in category_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="scl_type">
                <div class="form_lable">学校类型</div>
                <el-select v-model="school_edit_form.scl_type" placeholder="请选择学校类型">
                  <el-option v-for="(value, key, index) in scl_type_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="scl_product_id">
                <div class="form_lable">学校产品</div>
                <el-select v-model="school_edit_form.scl_product_id" placeholder="请选择学校产品">
                  <el-option v-for="item in product_dic" :key="item.product_id" :label="item.product_name" :value="item.product_id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="ecid">
                <div class="form_lable">集团客户编码</div>
                <el-input v-model="school_edit_form.ecid" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="biz_status_flag">
                <div class="form_lable">业务状态</div>
                <el-select v-model="school_edit_form.biz_status_flag" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="停用" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="default_biz_type">
                <div class="form_lable">套餐类型</div>
                <el-select v-model="school_edit_form.default_biz_type" placeholder="请选择套餐类型">
                  <el-option v-for="(value, key, index) in biz_type_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="marketing_type_flag">
                <div class="form_lable">激励方式</div>
                <el-select v-model="school_edit_form.marketing_type_flag" placeholder="请选择激励方式">
                  <el-option v-for="(value, key, index) in marketing_type_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="card_type_flag">
                <div class="form_lable">卡类型</div>
                <el-select v-model="school_edit_form.card_type_flag" multiple placeholder="请选择卡类型">
                  <el-option v-for="(value, key, index) in card_type_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="card_issuer_flag">
                <div class="form_lable">发卡方</div>
                <el-select v-model="school_edit_form.card_issuer_flag" placeholder="请选择发卡方">
                  <el-option v-for="(value, key, index) in card_issuer_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="share_equ_att_flag">
                <div class="form_lable">考勤机跨校共享标识</div>
                <el-select v-model="school_edit_form.share_equ_att_flag" placeholder="请选择">
                  <el-option label="允许" value="1"></el-option>
                  <el-option label="禁止" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="share_equ_tel_flag">
                <div class="form_lable">电话机跨校共享标识</div>
                <el-select v-model="school_edit_form.share_equ_tel_flag" placeholder="请选择">
                  <el-option label="允许" value="1"></el-option>
                  <el-option label="禁止" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="limit_telarea_flag">
                <div class="form_lable">亲情电话异地(外省)拨打</div>
                <el-select v-model="school_edit_form.limit_telarea_flag" placeholder="请选择">
                  <el-option label="允许" value="1"></el-option>
                  <el-option label="禁止" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="limit_telcom_flag">
                <div class="form_lable">亲情电话异网(其它运营商)拨打</div>
                <el-select v-model="school_edit_form.limit_telcom_flag" placeholder="请选择">
                  <el-option label="允许" value="1"></el-option>
                  <el-option label="禁止" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tel_stu_callany_flag">
                <div class="form_lable">是否允许学生刷卡后自由拨号</div>
                <el-select v-model="school_edit_form.tel_stu_callany_flag" placeholder="请选择">
                  <el-option label="允许" value="1"></el-option>
                  <el-option label="禁止" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tel_stu_nccall_flag">
                <div class="form_lable">是否允许学生免刷卡拨家长号码</div>
                <el-select v-model="school_edit_form.tel_stu_nccall_flag" placeholder="请选择">
                  <el-option label="允许" value="1"></el-option>
                  <el-option label="禁止" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="face_push_ratio">
                <div class="form_lable">人脸识别推送匹配度阈值</div>
                <el-input v-model="school_edit_form.face_push_ratio" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="msg_push_type">
                <div class="form_lable">消息推送方式</div>
                <el-select v-model="school_edit_form.msg_push_type" placeholder="请选择">
                  <el-option label="白名单" value="1"></el-option>
                  <el-option label="全部" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="" prop="tel_equ_share_id">
                <div class="form_lable">电话机跨校共享编号</div>
                <el-input v-model="school_edit_form.tel_equ_share_id" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="biz_way">
                <div class="form_lable">允许开通的业务类型</div>
                <el-select v-model="school_edit_form.biz_way" multiple placeholder="请选择">
                  <el-option label="移动" value="1"></el-option>
                  <el-option label="平安家校" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div class="dialog-btn" style="text-align: right">
        <span class="spp-btn" @click="schoolEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="schoolEditSubmit()">保存</span>
      </div>
    </el-dialog>
    <!-- 客户经理 -->
    <el-dialog title="客户经理" :visible.sync="schoolCmccVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-form ref="cmcc_search_form" :model="cmcc_search" :inline="true" label-width="">
          <div class="form-area">
            <el-form-item>
              <el-input v-model="cmcc_search.keyword" placeholder="请输入姓名/手机号" />
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getCmccData()">搜索</span>
            </div>
          </div>
        </el-form>
        <div>当前客户经理：{{cmcc_divide_form.cmcc_mgr_name}}</div>
        <el-table ref="table" :data="cmcc_data">
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="姓名" prop="user_name" />
        <el-table-column label="手机号" prop="user_phone" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="auth.update != -1" type="text" @click="cmccDivideSubmit(scope.row.user_id)">分配学校</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, detail, update, cmcc, divide, sync } from '@/api/pajx/pajx/school'
import { area, category, scl_type, product, biz_type, marketing_type, card_issuer, card_type } from '@/api/public'
import { formatArea } from '@/utils/index'
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'
export default {
  name: 'PajxSchool',
  components: { Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      search: {
        area_code: '',
        county_code: '',
        keyword: ''
      },
      area_code_dic: [],
      county_code_dic: [],
      category_dic: [],
      scl_type_dic: [],
      product_dic: [],
      biz_type_dic: [],
      marketing_type_dic: [],
      card_issuer_dic: [],
      card_type_dic: [],
      search_area_code: '',
      page: 1,
      page_size: 10,
      total: 0,
      school_paginate_data: [],
      schoolEditVisible: false,
      school_edit_form: {
        scl_id: '',
        scl_name: '',
        category: '',
        scl_type: '',
        scl_product_id: '',
        ecid: '',
        biz_status_flag: '', 
        default_biz_type: '',
        marketing_type_flag: '',
        card_type_flag: [],
        card_issuer_flag: '',
        share_equ_att_flag: '',
        share_equ_tel_flag: '',
        limit_telarea_flag: '',
        limit_telcom_flag: '',
        tel_stu_callany_flag: '',
        tel_stu_nccall_flag: '',
        face_push_ratio: '',
        msg_push_type: '',
        tel_equ_share_id: '',
        biz_way: [],
      },
      schoolCmccVisible: false,
      cmcc_data: [],
      cmcc_search: {
        keyword: ''
      },
      cmcc_divide_form: {
        scl_id: '',
        user_id: '',
        cmcc_mgr_name: ''
      }
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    search_area_code(val) {
      this.search.area_code = val
      this.search.county_code = ''
      for (var i in this.area_code_dic) {
        if (this.area_code_dic[i].area_code === val) {
          this.county_code_dic = this.area_code_dic[i].sub_area
        }
      }
    }
  },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.update = this.permission.indexOf('/api/pajx/school/update')
      this.auth.cmcc_divide = this.permission.indexOf('/api/sys/user/cmcc/divide')
      this.auth.sync = this.permission.indexOf('/api/pajx/school/sync')
     },
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
    },
    // 获取字典
    getDicData() {
      area().then(response => {
        var city_arr = formatArea(response.data)
        for (var i in city_arr) {
          this.area_code_dic.push(city_arr[i])
        }
      })
      category().then(response => {
        this.category_dic = response.data
      })
      scl_type().then(response => {
        this.scl_type_dic = response.data
      })
      product().then(response => {
        this.product_dic = response.data
      })
      biz_type().then(response => {
        this.biz_type_dic = response.data
      })
      marketing_type().then(response => {
        this.marketing_type_dic = response.data
      })
      card_issuer().then(response => {
        this.card_issuer_dic = response.data
      })
      card_type().then(response => {
        this.card_type_dic = response.data
      })
    },
    // 获取学校列表数据
    getSchoolPaginateData() {
      paginate(this.search, this.page, this.page_size).then(response => {
        this.school_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    // 学校详情
    schoolDetail(scl_id) {
      detail(scl_id).then(response => {
        this.schoolEditVisible = true
        this.school_edit_form.scl_id = response.data.scl_id
        this.school_edit_form.scl_name = response.data.scl_name
        this.school_edit_form.category = response.data.category
        this.school_edit_form.scl_type = response.data.scl_type
        this.school_edit_form.scl_product_id = response.data.scl_product_id
        this.school_edit_form.ecid = response.data.ecid
        this.school_edit_form.biz_status_flag = response.data.biz_status_flag
        this.school_edit_form.default_biz_type = response.data.default_biz_type
        this.school_edit_form.marketing_type_flag = response.data.marketing_type_flag
        this.school_edit_form.card_type_flag = response.data.card_type_flag?response.data.card_type_flag.split(','):[]
        this.school_edit_form.card_issuer_flag = response.data.card_issuer_flag
        this.school_edit_form.share_equ_att_flag = response.data.share_equ_att_flag
        this.school_edit_form.share_equ_tel_flag = response.data.share_equ_tel_flag
        this.school_edit_form.limit_telarea_flag = response.data.limit_telarea_flag
        this.school_edit_form.limit_telcom_flag = response.data.limit_telcom_flag
        this.school_edit_form.tel_stu_callany_flag = response.data.tel_stu_callany_flag
        this.school_edit_form.tel_stu_nccall_flag = response.data.tel_stu_nccall_flag
        this.school_edit_form.face_push_ratio = response.data.face_push_ratio
        this.school_edit_form.msg_push_type = response.data.msg_push_type
        this.school_edit_form.tel_equ_share_id = response.data.tel_equ_share_id
        this.school_edit_form.biz_way = response.data.biz_way?response.data.biz_way.split(','):[]
        this.cmcc_divide_form.cmcc_mgr_name = response.data.cmcc_mgr_name
      })
    },
    // 编辑学校
    schoolEditSubmit() {
      this.school_edit_form.card_type_flag = this.school_edit_form.card_type_flag.join(',')
      this.school_edit_form.biz_way = this.school_edit_form.biz_way.join(',')
      update(this.school_edit_form).then(response => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.schoolEditVisible = false
        this.getSchoolPaginateData()
      })
    },
    // 客户经理
    setSchoolCmccVisible(scl_id) {
      this.cmcc_divide_form.scl_id = scl_id
      this.getCmccData()
    },
    // 获取客户经理列表
    getCmccData() {
      this.schoolCmccVisible = true
      detail(this.cmcc_divide_form.scl_id).then(response => {
        this.cmcc_divide_form.cmcc_mgr_name = response.data.cmcc_mgr_name
        cmcc(this.cmcc_search).then(response => {
          this.cmcc_data = response.data
        })
      })
    },
    // 客户经理分配学校
    cmccDivideSubmit(user_id) {
      this.cmcc_divide_form.user_id = user_id
      divide(this.cmcc_divide_form).then(response => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.schoolCmccVisible = false
        this.getSchoolPaginateData()
      })
    },
    // 同步学校信息
    schoolSync() {
      this.$confirm('确认要同步学校信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sync().then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getSchoolPaginateData()
        })
      }).catch(() => {})
    }
  },
  created() {
    this.permissionAuth()
    this.getDicData()
    this.getSchoolPaginateData()
  }
}
</script>
<style lang="scss">
</style>
